iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
0

前言

過去在iPhone上,因為螢幕版面較小,每個 View Controller 都是用全螢幕的方式呈現,因為iPad螢幕版面較大,有些畫面如果用全螢幕方式呈現,就顯得不夠精緻,所以在iPad上就有一個浮出視窗來呈現另一個畫面,這個小視窗就是popover。

這個小視窗就是一個 View Controller,所以你原本可以呈現在手機螢幕上的畫面,也都可以"刻"在這個小視窗裡。

今天就用一個 Table View來作為範例。效果如下:

1.建立Single View App專案

2.開啟Main.storybaord,新增一個View Controller作為popover用

3.點選 popover 的 View Controller ,更改尺寸大小

在 Size 屬性面板將 「Simulated Size」改為 Freeform並且把寬高設為250 * 300。接著在 Attributes屬性面板將「Use Preferred Explicit Size」選項打勾。這時候可以看到 popover 的 View Controller被調整成250 * 300的大小。

3.在原本的 View Controller 上拖放一個Button元件

接著用右鍵拖曳藍線到 popover View Controller 的 segue ,segue 型態為 「Present As Popover」

4.開啟 ViewController.swift讓這個類別符合 UIPopoverPresentationControllerDelegate

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate {

//...程式碼略

}

5.覆寫 prepare(for:sender:)的函數

override func prepare (for segue: UIStoryboardSegue, sender: Any?) {
        let popoverCtrl = segue.destination.popoverPresentationController
        
        if sender is UIButton {
            popoverCtrl?.sourceRect = (sender as! UIButton).bounds
        }
        popoverCtrl?.delegate = self
    }

6.在 popover 上實作一個 Cell 是客製化的 TableView

自定義一個 Cell Class

class TableCell: UITableViewCell {
    
    @IBOutlet weak var catImage: UIImageView!
    @IBOutlet weak var catName: UILabel!
}

ViewController.swift這個類別也要同時符合 UITableViewDelegate, UITableViewDataSource,TableView的 delegate 和 datasource則導向 popover View Controller

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate, UITableViewDelegate, UITableViewDataSource {

//...程式碼略

}

遵守 UITableViewDataSource 的協定

    var catList = ["cat00", "cat01", "cat02", "cat03", "cat04", "cat05", "cat06"]

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return catList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath) as! TableCell
        cell.catImage.image = UIImage (named:catList[indexPath.row])
        cell.catName.text = catList[indexPath.row]
        return cell
    }

7.實作 func adaptivePresentationStyle(for controller:) 函數,並回傳.none。

原本 popover只能在iPad中呈現,回傳.none 的意思是關掉 iOS 自動判斷功能,要求 iOS 一律以 popover呈現

    func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
        return .none
    }

後記

對於暫時性要點選的畫面,用這種浮動視窗既方便有美觀,不用特地要預留空間排版,個人覺得可以應用的地方很多啊~~~


上一篇
Day12 - Git 基礎使用
下一篇
Day14 - 標籤列控制器 (TabBarController)
系列文
無中生有-從SWIFT語法學習到iOS APP的開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言